<template>
  <div class="bottomViews">

    <div class="topInforViews">
       
        <div class="left-big-title">
            <div class="left-space"></div>
            <span>商票GMV金额走势图</span>
        </div>


        <div class="rigth-money-title">
            <div class="left-round"></div>
            <span>GMV总金额(万元)</span>
        </div>
       
    </div>
   
    <div id="bar" class="bottom_bar_views"></div>

  </div>
</template>

<script setup name="bar">

import { getCurrentInstance, onMounted, proxyRefs, ref } from "vue"
import { useRouter } from "vue-router"
import * as echarts from 'echarts'
import myEventBus from '@/utils/notice'

const {proxy} = getCurrentInstance()
const router = useRouter()
const emitter = myEventBus

var myChart

emitter.on("resize",(res) =>{
    myChart.resize()
})

function showBarEcharts(){
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('bar');
    myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;

    option = {
        grid:{ // 设置图标四周留白间距
         top:'5%',
         bottom:'12%',
         left:'12%',
         right:'2%'
        },
        // x轴
        xAxis: {
            type: 'category',
            boundaryGap:false, // 设置x轴两边留白
            axisTick:{ //x轴刻度尺
              show:false
            },
            axisLine:{ //x轴线条颜色
                lineStyle: {
                color: '#999'
            }
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // y 轴
        yAxis: {
            type: 'value',
            // max:1400,//最大刻度值
            // interval:100,//刻度值间隔值
            splitLine :{//网格线
                // show:false //关闭网格线
                lineStyle:{
                    type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                    color:'#312846'  //网格线颜色
                },
            },
            axisLine: {//y轴线条颜色
                show: false,
                lineStyle: {
                    color: '#999'
                }
            }

        },
        tooltip:{
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#5843D8'
            }
            }
        },
        // #类型
        series: [
            {
                data:[100, 280, 324, 518, 635, 747, 960],
                type: 'line',
                smooth: true,//面积图改成弧形状
                lineStyle: {
                    width: 1,//外边线宽度
                    color:'#5843D8'//外边线颜色
                },
                showSymbol: false,//去除面积图节点圆
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 1, color: 'rgba(35, 190, 255, 0)' // 0% 处的颜色
                        }, {
                            offset: 0, color: 'rgba(5, 0, 255, 1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }

            }
        ]
    };
    option && myChart.setOption(option);
}


onMounted(() =>{
    showBarEcharts()

})


</script>

<style lang="scss" scoped>
.bottomViews{
    background: url('@/assets/business/top_left.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .topInforViews{
        height: 50px;
        width: 100%;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .left-big-title{
            display: flex;
            flex-direction: row;
            align-items: center;
            .left-space{
                width: 6px;
                height: 20px;
                background-color: #fff;
                margin-right: 5px;
            }
        }

        .rigth-money-title{
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 12px;
            color: rgba($color: #fff, $alpha: 0.85);
            margin-right: 10px;
            .left-round{
               width: 8px;
               height: 8px;
               background-color: rgba($color: #2276FC, $alpha: 1.0);
               border-radius: 4px; 
               margin-right: 5px;
            }
        }
    }



    .bottom_bar_views{
      flex: 1;
      
    }


    
}
</style>
